<template>
	<view class="acticities">
		<auth id="auth" ref="auth"></auth>
		<signsuc id="signsuc" ref="signsuc" @back="getData()"></signsuc>

		<view class="aheader">
			<image style="display: block;width: 100%;height: 690rpx;" :src="IMGLink + '/activities/activities_bg.png'"
				mode="widthFix"></image>

			<view class="header_cnt">
				<view style="height: 45rpx;"></view>
				<view class="atit">活动</view>
				<view class="bbox" v-if="userinfo" @click="link_to('/pagesA/my/coins/coinlist')">
					<image class="coin_icon" :src="IMGLink + '/activities/coin_icon.png'" mode="widthFix"></image>
					<view class="coin_txt">{{userinfo.user_virtual_coin | toFixedZero}}</view>
					<image class="coin_to_defaults" :src="IMGLink + '/activities/right.png'" mode="widthFix">
					</image>
				</view>
			</view>
		</view>

		<view class="signinbox">
			<view class="sitit">
				每日签到<text class="sitit_">（签到送{{names.coin}}{{userinfo.user_level_id > 0 ? '' : '，会员双倍哦～'}}）</text>
			</view>
			<view class="coinrule" @click="link_to('/pagesA/my/rules/ruleDetail?type=15')">规则说明</view>

			<template v-if="hasRegister">
				<view class="siforbox">
					<view class="siforitembox" v-for="(item, index) in signin_lists" :key="index">
						<view class="siforitem" :data-type1="item.day" :data-type2="days"
							:class="[days >= item.day ? 'issign' : '']">
							<image style="display: block;margin: 16rpx auto 0;width: 50rpx;height: auto;"
								:src="IMGLink + '/activities/coin_icon.png'" mode="widthFix"></image>
							<view class="coin_text">+{{userinfo.user_level_id > 0 ? item.vip_value : item.value}}</view>
						</view>
						<view class="siforitemtext" :class="[item.is_signin ? 'issign' : '']">{{item.day}}天</view>
					</view>
				</view>

				<button class="signinbtn issign" v-if="userinfo.is_signIn" type="default">已签到</button>
				<button class="signinbtn" v-else @click="signFun" type="default">立即签到</button>
			</template>
		</view>


		<view class="twoac">
			<image class="twoac_ dailytasks" @click="link_to('/pages/activities/tasks/tasks')"
				:src="IMGLink + '/activities/dailytasks.png'" mode="widthFix"></image>
			<image class="twoac_ achievementrank" @click="link_to('/pages/index/ranking-list/ranking-list')"
				:src="IMGLink + '/activities/achievementrank.png'" mode="widthFix">
			</image>
		</view>

		<view class="ad">
			<image @click="link_to('/pages/activities/activitieslist/activitieslist')"
				style="display: block;width: 100%;margin: 0 auto 20rpx;" :src="IMGLink + '/activities/cj.png'"
				mode="widthFix"></image>
		</view>

		<!-- <view class="zw" style="height: 34rpx;"></view> -->
	</view>
</template>

<script>
	import {
		name_config
	} from "@/common/config.js"
	import {
		getSignInfo,
		signInFun,
		preSignInFun
	} from "@/api/act/act.js"
	import {
		mapState
	} from 'vuex'
	import auth from "@/components/auth/auth"
	import signsuc from "./components/signsuc/signsuc"
	export default {
		components: {
			auth,
			signsuc,
		},
		data() {
			return {
				names: name_config,
				IMGLink: this.IMGLink,
				days: 0,
				signin_list: null
			}
		},
		computed: {
			signin_lists: function() {
				if (!this.signin_list) {
					return null
				}
				this.signin_list.map(item => {
					item.is_signin = this.days >= item.day
				})
				return this.signin_list
			},
			...mapState(['userinfo', 'hasRegister'])
		},
		onShow() {
			this.getData()
			this.$nextTick(() => {
				this.checkLogin()
			})
		},
		methods: {
			checkLogin() {
				this.$refs.auth.checkLogin()
			},
			getData() {
				getSignInfo().then(res => {
					const {
						days,
						list: signin_list
					} = res.data;
					this.days = days || 0;
					this.signin_list = res.data.list
				}).catch(err => {
					console.log(err)
				})
			},
			link_to(str) {
				if (!this.hasRegister) {
					this.checkLogin()
					return
				}
				uni.navigateTo({
					url: str
				});
			},
			signFun() {
				if (+this.userinfo.user_level_id > 0) {
					signInFun().then(res => {
						let coin = 0
						this.signin_list.map(item => {
							if (+item.day === +res.data.days) {
								coin = this.userinfo.user_level_id > 0 ? item.vip_value : item.value
								item.issign = true
							}
						})
						this.$refs.signsuc.showFun({
							days: res.data.days,
							coin: coin,
							level: 1
						})
						this.$store.dispatch("updateUserInfo")
						this.getData()
					}).catch(err => {
						console.log(err)
					})
				} else {
					preSignInFun().then(res => {
						this.$refs.signsuc.showFun({
							days: res.data.days,
							coin: res.data.draw,
							level: 0
						})
					}).catch(err => {
						console.log(err)
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFF0F1 !important;
	}
</style>
<style scoped>
	.acticities {
		width: 100%;
		height: auto;
	}

	.aheader {
		width: 100%;
		height: 690rpx;
		position: relative;
		z-index: 1;
	}

	.header_cnt {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.bbox {
		margin: 50rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.atit {
		margin: 26rpx auto 0;
		text-align: center;
		font-size: 36rpx;
		color: white;
		font-weight: 500;
	}

	.coin_icon {
		width: 40rpx;
		height: 36rpx;
	}

	.coin_txt {
		margin: 0 12rpx 0;
		font-size: 70rpx;
		color: white;
		font-weight: bold;
	}

	.coin_to_defaults {
		width: 28rpx;
		height: 28rpx;
	}

	.signinbox {
		position: relative;
		z-index: 2;
		margin: -320rpx auto 0;
		width: 93%;
		height: 486rpx;
		background-color: white;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.sitit {
		margin-top: 24rpx;
		font-size: 32rpx;
	}

	.sitit_ {
		font-size: 24rpx;
	}

	.siforbox {
		margin: 36rpx auto 0;
		display: flex;
		justify-content: space-around;
	}

	.siforitem {
		width: 82rpx;
		height: 110rpx;
		text-align: center;
		background: linear-gradient(316deg, #FAE6E3 1%, #FEF6EC 100%);
		border-radius: 6px;
		overflow: hidden;
	}

	.siforitem.issign {
		background: #EE5933 !important;
	}

	.coin_text {
		margin: 10rpx auto 0;
		font-size: 26rpx;
		text-align: center;
		color: #F7573C;
	}

	.issign .coin_text {
		color: white;
	}

	.siforitemtext {
		margin-top: 6rpx;
		text-align: center;
		color: #7C7C7C;
		font-size: 24rpx;
	}

	.siforitemtext.issign {
		color: #EE4D2D !important;
	}

	.signinbtn {
		margin: 54rpx auto 0;
		width: 470rpx;
		height: 84rpx;
		line-height: 84rpx;
		background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
		box-shadow: 0px 10px 18px 0px rgba(238, 73, 43, 0.25);
		border-radius: 21px;
		text-align: center;
		color: white;
	}

	.signinbtn.issign {
		margin: 54rpx auto 0;
		width: 470rpx;
		height: 84rpx;
		line-height: 84rpx;
		background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
		box-shadow: 0px 10px 18px 0px rgba(238, 73, 43, 0.25);
		border-radius: 21px;
		opacity: 0.53;
		text-align: center;
		color: white;
	}

	.twoac {
		margin: 34rpx auto 0;
		width: 93%;
		display: flex;
		justify-content: space-between;
	}

	.twoac_ {
		width: 340rpx;
		height: auto;
	}

	.ad {
		margin: 34rpx auto 0;
		width: 93%;
		height: auto;
		overflow: hidden;
	}

	.coinrule {
		position: absolute;
		top: 48rpx;
		right: 20rpx;
		color: #0f1011;
		font-size: 24rpx;
	}
</style>
